<template>
    <MyCard>
        <div class="title">
            <div></div>
            标签管理
        </div>
        <div class="search-box">
            <el-input style="width: 376px" placeholder="请输入关键字" :suffix-icon="Search" v-model="searchInput"
                @blur="searchEvent(searchInput)" />
            <el-button type="primary" @click="onAddTagBtn?.openDialog()">新增标签</el-button>
        </div>
        <MyTable :columns="columns" :data="tableData" :total="total" v-model:pageData="pageData" :stripe="true">
            <template #state="scoped">
                <el-switch v-model="scoped.row.state" inline-prompt active-text="启用" inactive-text="禁用"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgba(204, 204, 204, 1)" />
            </template>
            <template #action="scoped">
                <el-button link style="border: none;" type="primary"
                    @click="onAddTagBtn?.openDialog(scoped.row)">编辑</el-button>
                <el-button link style="border: none;" type="danger" @click="onDeleteBtn(scoped.row)">删除</el-button>
            </template>
        </MyTable>
    </MyCard>
    <TagForm @findTag="findTag" ref="openDialog"></TagForm>

</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import { deleteTagApi, findTagApi } from '../../../api/tagcontrol';
import MyTable from '../../../components/MyTable.vue';
import MyCard from '../../../components/MyCard.vue';
import TagForm from './TagForm.vue';
const searchInput = ref("");
const tableData = ref([]);
const total = ref(0);
const columns = ref([
    { label: '编号', prop: '_id' },
    { label: '标签名称', prop: 'name' },
    { label: '添加人', prop: 'creatorId.name' },
    { label: '最后修改时间', prop: 'updateTime' },
    { label: '使用状态', prop: 'state' },
    { label: '操作', prop: 'action' }
]);
const onAddTagBtn = useTemplateRef('openDialog');
const pageData = ref({
    currentPage: 1,
    pageSize: 20,
})




onMounted(() => {
    findTag();
})
watch([pageData.value, tableData.value], () => {
    findTag();
}, { deep: true })

function searchEvent(item) {
    findTag(item);
}

//获取
function findTag(data) {
    findTagApi({ ...pageData.value, name: data }).then(res => {

        if (res.code == 200) {
            tableData.value = res.data.rows;
            total.value = res.data.total;
        }
    })
}



//删除
function onDeleteBtn(_id) {
    ElMessageBox.confirm(
        '删除后无法恢复，定要删除此条记录吗？',
        '确认删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            console.log(_id);
            deleteTagApi({
                _id,
            })
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功!');
                        findTag();
                    } else {
                        ElMessage.error(res.message);
                    }
                })
        })
        .catch(() => { })
}
</script>



<style lang="scss" scoped>
.title {
    display: flex;
    line-height: 1;

    div {
        margin-top: -1px;
        width: 6px;
        height: 23px;
        background-color: rgba(41, 132, 248, 1);
        margin-right: 10px;
        border-radius: 60px;
    }

    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-bottom: 20px;
}

.search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 20px;

    .el-input {
        width: 376px;
        height: 40px;
        color: rgb(204, 204, 204);
        font-size: 13px
    }

    .el-button {
        line-height: 1;
    }
}
</style>
